<template>
  <div class="market-page">
    <div class="menu">
      <MenuItem :index="1"></MenuItem>
    </div>
    <el-scrollbar class="colR">
      <div class="search">
        <el-form>
          <el-row type="flex" :gutter="20">
            <el-col :span="5">
              <el-form-item label="类目">
                <el-select
                  placeholder="食品"
                  v-model="query.c1"
                  :style="{ width: '100px' }"
                ></el-select>
                <el-select
                  placeholder="休闲零食"
                  v-model="query.c2"
                  :style="{ width: '100px', marginLeft: '10px' }"
                ></el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="平台">
                <el-select
                  placeholder="全部"
                  v-model="query.c3"
                  :style="{ width: '100px' }"
                ></el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="作者类型">
                <el-select
                  placeholder="全部"
                  v-model="query.c4"
                  :style="{ width: '100px' }"
                ></el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="时间范围">
                <el-date-picker
                  v-model="query.c5"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="2023-01"
                  end-placeholder="2023-12"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-button type="primary">搜索</el-button>
              <el-button type="text" :style="{ marginLeft: '20px' }"
                >更多</el-button
              >
            </el-col>
          </el-row>
        </el-form>
        <el-tabs
          v-model="activeName"
          type="card"
          class="demo-tabs"
          @tab-click="handleClick"
        >
          <el-tab-pane label="人群画像" name="人群画像"></el-tab-pane>
          <el-tab-pane label="功能功效" name="功能功效"></el-tab-pane>
          <el-tab-pane label="消费场景" name="消费场景"></el-tab-pane>
          <el-tab-pane label="口味味道" name="口味味道"></el-tab-pane>
          <el-tab-pane label="包装风格" name="包装风格"></el-tab-pane>
          <el-tab-pane label="原材料" name="原材料"></el-tab-pane>
          <el-tab-pane label="口感特点" name="口感特点"></el-tab-pane>
          <el-tab-pane label="产品质地" name="产品质地"></el-tab-pane>
          <el-tab-pane label="工艺技术" name="工艺技术"></el-tab-pane>
        </el-tabs>
      </div>
      <div class="column" v-if="activeName === '人群画像'">
        <div class="section">
          <img src="../../assets/market/bg-1.png" width="100%" alt="" />
        </div>
        <div class="section">
          <img src="../../assets/market/bg-2.png" width="100%" alt="" />
        </div>
        <div class="section">
          <img src="../../assets/market/bg-3.png" width="100%" alt="" />
        </div>
        <div class="section">
          <img src="../../assets/market/bg-4.png" width="100%" alt="" />
        </div>
        <div class="section">
          <img src="../../assets/market/bg-5.png" width="100%" alt="" />
        </div>
        <div class="section">
          <img src="../../assets/market/bg-6.png" width="100%" alt="" />
        </div>
      </div>
      <div class="column" v-if="activeName === '功能功效'">
        <div class="section">
          <img src="../../assets/home/9-03.png" width="100%" alt="" />
        </div>
        <div class="section">
          <img src="../../assets/home/9-04.png" width="100%" alt="" />
        </div>
        <div class="section" :style="{ width: '100%' }">
          <img src="../../assets/home/9-05.png" width="100%" alt="" />
        </div>
        <div class="section">
          <img src="../../assets/home/9-06.png" width="100%" alt="" />
        </div>
        <div class="section">
          <img src="../../assets/home/9-07.png" width="100%" alt="" />
        </div>
        <div class="section">
          <img src="../../assets/home/9-08.png" width="100%" alt="" />
        </div>
        <div class="section">
          <img src="../../assets/home/9-09.png" width="100%" alt="" />
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import MenuItem from "./menu.vue";
import { Delete, Edit, Search, Plus } from "@element-plus/icons-vue";
const query = reactive({
  c1: "",
  c2: "",
  c3: "",
  c4: "",
  c5: [],
});
const activeName = ref("人群画像");
</script>

<style lang="scss">
.market-page {
  display: flex;
  height: calc(100vh - 60px);
  .menu {
    background-color: #fff;
  }
  .colR {
    margin-left: auto;
    width: 1%;
    flex: 1;
    margin-left: 20px;
    padding-right: 20px;
    .search {
      width: calc(100% - 40px);
      border-radius: 12px;
      background-color: #fff;
      margin-top: 20px;
      overflow: hidden;
      padding: 20px 20px 6px;
    }
    .column {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding-bottom: 20px;
      .section {
        width: calc(50% - 50px);
        background-color: #fff;
        border-radius: 12px;
        padding: 10px 20px;
        margin-top: 20px;
        overflow: hidden;
      }
    }
  }
}
</style>
